<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple (中国大陆) - 官方网站</title>
    <link rel="icon" href="./img/favicon.ico">
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>

    <!-- 设置表头 -->
    <div class="adv-wrapper">
        <div class="adv-wrapper-text">
            <广告>
        </div>
    </div>

    <!-- 设置菜单 -->
    <nav class="menu">
        <div class="content">
            <!-- 设置小的菜单-->
            <ul class="header">
                <li class="ac-gn-item  ac-gn-menuicon">
                    <a href="javascript:;">
                        <i class="fa fa-navicon"></i>
                    </a>
                </li>
                <li class="ac-gn-item ac-gn-apple">
                    <a href="javascript:;"><i class="fa fa-apple"></i></a>
                </li>
                <li class="ac-gn-item ac-gn-bag">
                    <a href="javascript:;"><i class="fa fa-suitcase"></i></a>
                </li>
            </ul>

            <!-- 设置搜索栏 -->
            <div class="search"></div>

            <!-- 设置分类 -->
            <ul class="list">
                <li class="item apple ">
                    <a href="javascript:;" class="ap-link link-apple">
                        <i class="fa fa-apple"></i>
                    </a>
                </li>
                <li class="item item-menu mac">
                    <a href="javascript:;" class="ap-link">
                        <span class="link-test">Mac</span>
                    </a>
                </li>
                <li class="item item-menu ipad">
                    <a href="javascript:;" class="ap-link">
                        <span class="link-test">iPad</span>
                    </a>
                </li>
                <li class="item item-menu iphone">
                    <a href="javascript:;" class="ap-link">
                        <span class="link-test">iPhone</span>
                    </a>
                </li>
                <li class="item item-menu watch">
                    <a href="javascript:;" class="ap-link">
                        <span class="link-test">Watch</span>
                    </a>
                </li>
                <li class="item item-menu music">
                    <a href="javascript:;" class="ap-link">
                        <span class="link-test">Music</span>
                    </a>
                </li>
                <li class="item item-menu support">
                    <a href="javascript:;" class="ap-link">
                        <span class="link-test">技术支持</span>
                    </a>
                </li>
                <li class="item item-menu search">
                    <a href="javascript:;" class="ap-link link-search">
                        <i class="fa fa-search"></i>
                    </a>
                </li>
                <li class="item  bag">
                    <a href="javascript:;" class="ap-link link-bag">
                        <i class="fa fa-suitcase"></i>
                    </a>
                </li>
            </ul>

            <!-- 设置购物车栏 -->
            <div class="shop"></div>

        </div>
    </nav>

    <div class="ribbon">
        <div class="ribbon-content">
            <span>
                <a href="javascript:;">在线选购</a>
                ，享受免费送货、Specialist 专家支持、免息分期等
            </span>
        </div>
    </div>
    <div class="img-all">
    <!-- 设置图片 -->
    <div class="img-list">
        <div class="content">
            <div class="wrapper">
                <div class="unit-copy-wrapper">
                    <h2 class="headline">
                        为高校生活购买 Mac 或 iPad，AirPods
                        <!-- <br class="small-show"> -->
                        搭配其中。 
                    </h2>
                    <div class="cta-links">
                        <a href="javascript:;" class="icon">教育优惠省更多></a>
                    </div>
                </div>
            </div>
            <div class="unit-image-wrapper">
                <figure class="unit-image"></figure>
            </div>
        </div>
        <div class="content-1">
            <div class="wrapper-1">
                <div class="unit-copy-wrapper-1">
                    <h2 class="headline-1">
                        iPhone 12
                    </h2>
                    <h3 class="subhead">升维大提速</h3>
                    <div class="pricing-info">
                        <p class="price">
                            <span>RMB 229/月或 RMB 5499 起
                                <br>
                                还可折抵换购
                            </span>
                        </p>
                    </div>
                    <div class="cta-links-1">
                        <a href="javascript:;" class="icon-1">进一步了解></a>
                        <a href="javascript:;" class="icon-2">购买></a>
                    </div>
                </div>
            </div>
            <div class="unit-image-wrapper-1">
                <figure class="unit-image-1"></figure>
            </div>
        </div>
        <div class="content-2">
            <div class="wrapper-2">
                <div class="unit-copy-wrapper-2">
                    <h2 class="headline-2">
                        iPhone 12 Pro
                    </h2>
                    <h3 class="subhead-2">自我再飞跃</h3>
                    <div class="pricing-info-2">
                        <p class="price-2">
                            <span>RMB 354/月或 RMB 8499 起
                                <br>
                                还可折抵换购
                            </span>
                        </p>
                    </div>
                    <div class="cta-links-2">
                        <a href="javascript:;" class="icon-1">进一步了解></a>
                        <a href="javascript:;" class="icon-2">购买></a>
                    </div>
                </div>
            </div>
            <div class="unit-image-wrapper-2">
                <figure class="unit-image-2"></figure>
            </div>
        </div>
    </div>

    <!-- 设置网格图片 -->
    <div class="web-img">
        <div class="content_1">
            <div class="wrapper_1">
                <div class="unit-copy-wrapper_1">
                    <h4 class="headline_1">
                        iMac
                    </h4>
                    <h5 class="subhead_1">新开篇</h5>
                    <div class="cta-links_1">
                        <a href="javascript:;" class="icon-1">进一步了解></a>
                        <a href="javascript:;" class="icon-2">购买></a>
                    </div>
                </div>
            </div>
            <div class="unit-image-wrapper_1">
                <figure class="unit-image_1"></figure>
            </div>
        </div>
        <div class="content_2">
            <div class="wrapper_2">
                <div class="unit-copy-wrapper_2">
                    <h4 class="headline_2">
                        iPad Pro
                    </h4>
                    <h5 class="subhead_2">由 Apple M1 芯片强势驱动</h5>
                    <div class="cta-links_2">
                        <a href="javascript:;" class="icon-1">进一步了解></a>
                        <a href="javascript:;" class="icon-2">购买></a>
                    </div>
                </div>
            </div>
            <div class="unit-image-wrapper_2">
                <figure class="unit-image_2"></figure>
            </div>
        </div>
    </div>
    <div class="web-img_1">
        <div class="content_3">
            <div class="wrapper_3">
                <div class="unit-copy-wrapper_3">
                    <h4 class="headline_3">
                        Apple Watch Series 6
                    </h4>
                    <h5 class="subhead_3">健康的未来，现在戴上。</h5>
                    <div class="cta-links_3">
                        <a href="javascript:;" class="icon-1">进一步了解></a>
                        <a href="javascript:;" class="icon-2">购买></a>
                    </div>
                </div>
            </div>
            <div class="unit-image-wrapper_3">
                <figure class="unit-image_3"></figure>
            </div>
        </div>
        <div class="content_4">
            <div class="wrapper_4">
                <div class="unit-copy-wrapper_4">
                    <p class="violator">Today at Apple</p>
                    <h4 class="headline_4">
                        校园创时代
                    </h4>
                    <h5 class="subhead_4">用 iPad、Mac 等放飞创造力，</h5>
                    <div class="cta-links_4">
                        <a href="javascript:;" class="icon-1">进一步了解></a>
                        <a href="javascript:;" class="icon-2">购买></a>
                    </div>
                </div>
            </div>
            <div class="unit-image-wrapper_4">
                <figure class="unit-image_4"></figure>
            </div>
        </div>
    </div>
    <div class="web-img_2">
         <div class="content_5"> 
            <div class="wrapper_5">
                <div class="unit-copy-wrapper_5">
                    <h4 class="headline_5">
                        AirTag
                    </h4>
                    <h5 class="subhead_5">丢三落四这门绝技，要失传了</h5>
                    <div class="cta-links_5">
                        <a href="javascript:;" class="icon-1">进一步了解></a>
                        <a href="javascript:;" class="icon-2">购买></a>
                    </div>
                </div>
            </div>
            <div class="unit-image-wrapper_5">
                <figure class="unit-image_5"></figure>
            </div>
        </div>
        <div class="content_6">
            <div class="wrapper_6">
                <div class="unit-copy-wrapper_6">
                    <h4 class="headline_6">
                        Apple Music
                    </h4>
                    <h5 class="subhead_6">支持杜比全景声的空间音频
                        <br>
                        全新登场
                    </h5>
                    <div class="cta-links_6">
                        <a href="javascript:;" class="icon-1">现在就听></a>
                    </div>
                </div>
            </div>
            <div class="unit-image-wrapper_6">
                <figure class="unit-image_6"></figure>
            </div>
        </div> 
    </div>
</div>
    
</body>
</html>